<template>
    <div class="d1">
        <div class="d2">
            <p class="p1">
                <van-nav-bar
                title="收藏夹"
                :right-text="zi"
                left-arrow
                @click-left="onClickLeft"
                @click-right="onClickRight"
                />
            </p>
            <p class="p2">
                <van-tabs v-model:active="active"
                color="#c1ab96" 
                title-active-color="#c1ab96"
                title-inactive-color="black"
                background="#eae9e5">
                    <van-tab  title="全部" style="margin-top:26%">
                    <shop :kno="kno" :zi="zi" :any="any" ></shop>
                    </van-tab>
                    <van-tab title="降价中" style="margin-top:26%">
                    <shop :kno="kno" :zi="zi" :any="any"></shop>
                    </van-tab>
                    <van-tab title="低库存" style="margin-top:26%">
                    <shop :kno="kno" :zi="zi" :any="any"></shop>
                    </van-tab>
                    <van-tab title="已失效" style="margin-top:26%">
                    <shop :kno="kno" :zi="zi" :any="any"></shop>
                    </van-tab>
                </van-tabs>
            </p>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { ref, reactive, onMounted } from 'vue';
    import axios from 'axios'
    import shop from '@/views/shopCar/Favorites/shop.vue'
    let active=ref(0)
    let kno=ref(false)
    let zi=ref("编辑")
    let edt=function(){

    }
    let any=reactive([])
    let sty=reactive([])
    let onClickLeft=function(){
        kno.value=false
        zi.value="编辑"
        co.value="black"

    }
    let onClickRight=function(){
        // console.log("1111");
        kno.value=true
        zi.value="删除"
        co.value="red"
        
        if(zi.value=="删除"){
            // any.splice("1",give)
            // console.log(any);
            
        }
    }
    let co=ref("black")
    onMounted:{
        axios.get('https://console-mock.apipost.cn/app/mock/project/b0e8c554-8b0c-4a31-bfda-edfab429f639/list')
        .then(res=>{
            res.data.list.forEach( item =>{
                any.push(item)
            })
            })
    }
</script>

<style >
    .d1{width: 100%;height: 100%;background-color: #eae9e5;}
    .van-nav-bar__text{color: v-bind(co)}
    .van-nav-bar__content{background-color: #eae9e5;}
    .d2{height: 20%; width:100% ; font-size: 16px;}
    .a1{margin-top: 5%;margin-left: ; display: inline-block;}
    .p1{width: 100%;height: 100%;}
    .van-tabs__wrap{background-color: #eae9e5;}
    .a2{display: inline-block;margin-left:40% ;}
    .van-tab van-tab--line van-tab--active{background-color: #eae9e5;}
    .van-icon-arrow-left:before{color: #c2ad98;}
    .van-tabs__nav van-tabs__nav--line{position: fixed;top: 10%;}
    .van-tabs__wrap{position: fixed;z-index: 9999;width: 100%;top:10%;}
    .van-nav-bar__content{position: fixed;width: 100%;top: 0;height: 10%;}
    .van-nav-bar van-hairline--bottom{position: fixed;top: 0;z-index: 9999;width: 100%;height: 100%;}
    .a3{display: inline-block;font-size: 12px;margin-left: 27%;}
</style>